<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>用户注册</title>
    <link href="asserts/css/bootstrap.min.css" th:href="@{/webjars/bootstrap/4.0.0/css/bootstrap.css}" rel="stylesheet">
    <style>
        .login{
            width: 400px;
            height: 300px;
            margin: 0 auto;
        }
        .error_color{
            color: crimson;
        }

    </style>
</head>
<body class="text-center">

<br><br><br>
<!--/*@thymesVar id="UserEntity" type="user"*/-->
<form class="form-signin" action="/user/register" method="post" th:object="${user}" onsubmit="return check();">
    <label class="sr-only" ></label>
    <img th:src="@{/asserts/img/index.jpg}" src="asserts/img/index.jpg" alt="" width="125" height="125">
    <label class="sr-only" ></label>
    <h1 class="h3 mb-3 font-weight-normal" >请注册</h1>

    <!--判断-->
    <div class="login">
        <p style="color: red" th:text="${msg}" th:if="${not #strings.isEmpty(msg)}" id="msg"></p>
        <label class="sr-only" ></label>
        <input type="text"  name="username"  id="username" class="form-control" placeholder="用户名" />
        <span id="span1" class="error_color"></span>
        <input type="text"  name="mobile" id="mobile" class="form-control" placeholder="手机号码" />
        <span id="span2" class="error_color"></span>
        <label class="sr-only" ></label>
        <input type="password" name="password" id="password" class="form-control" placeholder="密码" />
        <span id="span3" class="error_color"></span>
        <label class="sr-only" ></label>
        <input type="password" name="RePassword" id="RePassword" class="form-control" placeholder="确认密码" />
        <span id="span4" class="error_color"></span>
        <label class="sr-only" ></label>
        <input type="text" name="email" id="email" class="form-control" placeholder="邮箱" />
        <span id="span5" class="error_color"></span>

        <div class="checkbox mb-3">
        </div>
        <button class="btn btn-lg btn-primary btn-block" type="submit" id="register">用户注册</button>
    </div>
    <br>
    <p class="mt-5 mb-3 text-muted">© 2020-2021</p>
</form>

<script type="text/javascript">

    let temp;
    let test1 = false;
    let test2 = false;
    let test3 = false;
    let test4 = false;
    let test5 = false;


    window.onload = function(){

        document.getElementById("register").onfocus = function(){
            if (document.getElementById("username").value == ""){
                document.getElementById("span1").innerText = "用户名不能为空";
            }
            if (document.getElementById("mobile").value == ""){
                document.getElementById("span2").innerText = "手机号不能为空"
            }
            if (document.getElementById("password").value == ""){
                document.getElementById("span3").innerText = "密码不能为空"
            }
            if (document.getElementById("email").value == ""){
                document.getElementById("span5").innerText = "邮箱不能为空"
            }
        }

        //校验用户名
        document.getElementById("username").onblur = function(){
            temp = document.getElementById("username").value;
            if(temp == ''){
                document.getElementById("span1").innerText = "用户名不能为空";
                return;
            }
            else if(temp.length < 2 || temp.length > 6){
                document.getElementById("span1").innerText = "用户名必须在2-6位之间";
                return;
            } else {
                test1 = true;
            }
        }
        document.getElementById("username").onfocus = function(){
            document.getElementById("span1").innerText = "";
        }


        //校验手机号
        document.getElementById("mobile").onblur = function(){
            temp = /^1\d{10}$/.test(document.getElementById("mobile").value);
            if(temp == ''){
                document.getElementById("span2").innerText = "号码必须是以1为开始的11位数字";
                return;
            } else {
                test2 = true;
            }
        }
        document.getElementById("mobile").onfocus = function(){
            document.getElementById("span2").innerText = "";
        }


        //校验密码
        document.getElementById("password").onblur = function(){
            temp = document.getElementById("password").value;
            if(temp == ''){
                document.getElementById("span3").innerText = "密码不能为空";
                return;
            }
            else if(temp.length < 4 || temp.length > 9){
                document.getElementById("span3").innerText = "密码必须在4-9位之间";
                return;
            } else {
                test3 = true;
            }
        }
        document.getElementById("password").onfocus = function(){
            document.getElementById("span3").innerText = "";
        }


        //校验确认密码
        document.getElementById("RePassword").onblur = function(){
            if(document.getElementById("password").value !=
                document.getElementById("RePassword").value){
                document.getElementById("span4").innerText = "确认密码与密码不一致";
            }
            else test4 = true;
        }
        document.getElementById("RePassword").onfocus = function(){
            document.getElementById("span4").innerText = "";
        }

        //校验邮箱
        document.getElementById("email").onblur = function(){
            temp = /\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/.test(document.getElementById("email").value);
            if(!temp){
                document.getElementById("span5").innerText = "邮箱格式不合法";
            }
            else test5 = true;
        }
        document.getElementById("email").onfocus = function(){
            document.getElementById("span5").innerText = "";
        }



    }
    function check() {
       /* console.log("1:"+test1+"2:"+test2+"3:"+test3+"4:"+"5:"+test5);
        let flag = test1 && test2 && test3 && test4 && test5;
        let msg = document.getElementById("msg").value;
        let msgSuccess = "用户注册成功"
        if (flag && msg == msgSuccess){
            alert("注册成功，点击返回登录页面")
            return true;
        }else{
            return false;
        }*/
        return test1 && test2 && test3 && test4 && test5;

    }
</script>
</body>
</html>
